<template>
  <!-- 通证涨跌明细 -->
  <div class="tokencontent">
    <div id="picbar" />
  </div>
</template>

<script>
import * as echarts from "echarts/core";
import {
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { PictorialBarChart, BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  PictorialBarChart,
  BarChart,
  CanvasRenderer,
]);

import { getScreenToken } from "@/api/user";
import { getToken } from "@/utils/auth";
export default {
  name: "TokenUpChart",
  data() {
    return {
      zindex: 0,
    };
  },
  mounted() {
    // this.initchart();
    if (getToken()) {
      this.getScreenToken();
    }
  },
  methods: {
    async getScreenToken() {
      const res = await getScreenToken();
      if (res.code === 200) {
        const list = res.data.ScreenTokenList.reverse();
        console.log(res.data, "list");
        const data1 = [];
        const data2 = [];
        const xdata = [];
        console.log(list);
        list.forEach((item) => {
          data1.push(item.pastToken);
          data2.push(item.nowToken);
          xdata.push(item.day);
        });
        this.$nextTick(() => {
          console.log("data1", data1);
          this.initchart(data1, data2, xdata);
        });
      }
    },
    initchart(data1, data2, xdata) {
      var xData2 = xdata;
      // var data1 = [0.06, 0.03, 0.02, 0.02, 0.05, 0.03, 0.04];
      // var data2 = [0.04, 0.01, 0.04, 0.05, 0.08, 0.05, 0.05];
      var option = {
        legend: {
          right: "8%",
          data: [
            {
              name: "昨日" + this.$tokenName,
              // 强制设置图形为圆。
              icon: "roundRect",
              textStyle: {
                color: "rgba(255, 255, 255, 0.90)",
              },
              // 设置文本为红色
            },
            {
              name: "今日" + this.$tokenName,
              // 强制设置图形为圆。
              icon: "roundRect",
              textStyle: {
                color: "rgba(255, 255, 255, 0.90)",
              },
              // 设置文本为红色
            },
          ],
        },
        tooltip: {
          trigger: "item",
        },
        color: ["#fff", "#267FFE"],
        grid: {
          top: "15%",
          left: "10%",
          bottom: "20%",
          right: "5%",
        },
        xAxis: {
          data: xData2,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(60, 101, 121, 1)",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "rgba(255,255,255,0.5)",
              fontSize: "rgba(189, 209, 255, 0.6)",
            },
            margin: 15, // 刻度标签与轴线之间的距离。
          },
        },
        yAxis: {
          max: 0.1,
          // interval: 0.01, //刻度值间隔值
          axisTick: {
            show: false,
          },
          name: "(元)",
          axisLabel: {
            formatter: "{value}", // 设置单位为元
            textStyle: {
              color: "rgba(189, 209, 255, 0.6)",
            },
          },
          boundaryGap: true,
          nameTextStyle: {
            color: "rgba(189, 209, 255, 0.5)",
            align: "right",
            verticalAlign: "bottom",
            fontSize: 14,
          },
          splitLine: {
            // 网格线
            show: true, // 关闭网格线
            // 或者
            lineStyle: {
              type: "dashed", // 设置网格线类型 dotted：虚线   solid:实线
              color: "rgba(42, 120, 254, 0.2)",
            },
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            // 最低下的圆
            name: "",
            type: "pictorialBar",
            symbolSize: [25, 10],
            symbolOffset: [0, 5],
            z: 12,
            itemStyle: {
              opacity: 1,
              color: (e) => {
                const index = e.dataIndex;
                if (data2[index] <= data1[index]) {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#80AEFF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#2A78FE", // 100% 处的颜色
                    },
                  ]);
                } else {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#91FBFF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#01F5FF", // 100% 处的颜色
                    },
                  ]);
                }
              },
            },
            data: [1, 1, 1, 1, 1, 1, 1],
          },

          // 下半截柱状图
          {
            name: "",
            type: "bar",
            barWidth: 25,
            barGap: "-100%",
            symbolOffset: [0, -18],
            z: 0,
            itemStyle: {
              // lenged文本
              opacity: 1,
              color: (e) => {
                const index = e.dataIndex;
                if (data2[index] <= e.data) {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(1, 245, 255, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(1, 245, 255, 0.5)", // 100% 处的颜色
                    },
                  ]);
                } else {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(1,245,255,0.5)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(1,245,255,0.3)", // 100% 处的颜色
                    },
                  ]);
                }
              },
            },

            data: data1,
          },

          {
            // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
            type: "bar",
            barWidth: 25,
            z: 1,
            barGap: "-100%",
            stack: "广告",
            itemStyle: {
              color: "transparent",
            },
            data: data1,
          },

          {
            name: "", // 头部
            type: "pictorialBar",
            symbolSize: [25, 10],
            symbolOffset: [0, -5],
            z: 14,
            symbolPosition: "end",
            // itemStyle: {
            //   color: "#01A8FF",
            //   opacity: 1,
            // },
            itemStyle: {
              opacity: 1,
              color: (params) => {
                if (data1[params.dataIndex] <= params.data) {
                  return "#2685FE";
                } else {
                  return "#2685FE";
                }
              },
            },
            data: data2,
          },
          {
            name: "昨日" + this.$tokenName,
            type: "pictorialBar",
            symbolSize: [25, 10],
            symbolOffset: [0, -5],
            z: 1,
            itemStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#91FBFF", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#01F5FF", // 100% 处的颜色
                },
              ]),
            },
            symbolPosition: "end",
            data: data1,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [25, 10],
            symbolOffset: [0, -5],
            z: 1,
            itemStyle: {
              opacity: 1,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#91FBFF", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#01F5FF", // 100% 处的颜色
                },
              ]),
            },
            symbolPosition: "end",
            data: data1,
          },

          {
            name: "今日" + this.$tokenName,
            type: "bar",
            barWidth: 25,
            symbolOffset: [0, 10],
            barGap: "-100%",
            z: 0,
            itemStyle: {
              color: (params) => {
                // 上半截柱状图
                if (params.data <= data1[params.dataIndex]) {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(42, 120, 254, 0.8)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(42, 120, 254, 0.3)", // 100% 处的颜色
                    },
                  ]);
                } else {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(42, 120, 254, 0.8)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(1,245,255,0.2)", // 100% 处的颜色
                    },
                  ]);
                }
              },
              opacity: 1,
            },

            data: data2,
          },
        ],
      };

      var chartDom = document.getElementById("picbar");
      var myChart = echarts.init(chartDom);
      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.tokencontent {
  width: 3.4583rem;
  height: 1.3438rem;
  margin: 0 auto;
}
#picbar {
  width: 3.4583rem;
  height: 1.3438rem;
}
</style>
